<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="500px">
			<el-form ref="formRef" :model="state.ruleForm" :rules="state.rules">
				<el-row>
					<el-col :span="24">
						<el-form-item label="菜单权限">
							<el-tree
								ref="permissionTreeRef"
								:data="state.treeSelectData"
								empty-text="加载中，请稍候"
								node-key="id"
								:props="state.permissionIdsProps"
								show-checkbox
								class="menu-data-tree"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { permissionApi, rolesApi } from '/@/api';

const RolesApi = rolesApi();
const PermissionApi = permissionApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		role_id: '',
		permission_ids: [],
	},
	rules: {
		name: [{ required: true, message: '角色名称不能为空', trigger: ['blur'] }],
	},
	permissionIdsProps: {
		value: 'id',
		label: 'title',
		children: 'child',
	},
	treeSelectData: [],
	defaultCheckedKeys: [],
});
const formRef = ref();
const permissionTreeRef = ref();

/********** 触发事件 **********/
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	const permission_ids = getMenuAllCheckedKeys().join();
	if (!permission_ids) return ElMessage.warning('请分配菜单');
	_rolesAssignPermissions({
		role_id: state.ruleForm.role_id,
		permission_ids: permission_ids,
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog = {
		isShowDialog: true,
		type: '',
		title: `「${row.name}」分配菜单`,
		submitLoading: false,
	};
	state.ruleForm.role_id = row.id;
	_permissionList();
};
// 所有菜单节点数据
const getMenuAllCheckedKeys = () => {
	// 目前被选中的菜单节点
	let checkedKeys = permissionTreeRef.value.getCheckedKeys();
	// 半选中的菜单节点
	let halfCheckedKeys = permissionTreeRef.value.getHalfCheckedKeys();
	checkedKeys.unshift.apply(checkedKeys,halfCheckedKeys);
	return checkedKeys;
};

/********** 网络请求 **********/
// 权限菜单列表
const _permissionList = () => {
	PermissionApi.permissionList().then((res: any) => {
		state.treeSelectData = res.data.list;
		_rolesInfo({ role_id: state.ruleForm.role_id });
	});
};
// 获取角色信息
const _rolesInfo = (params: any) => {
	RolesApi.rolesInfo(params).then((res) => {
		state.ruleForm = {
			role_id: res.data.info.id,
			permission_ids: res.data.info.permission_ids.split(','),
		};
		state.ruleForm.permission_ids.map((item: any) => {
			permissionTreeRef.value.setChecked(item, true, false);
		});
	});
};
// 分配菜单
const _rolesAssignPermissions = (params: Object) => {
	RolesApi.rolesAssignPermissions(params).then(() => {
		ElMessage.success('操作成功！');
		onCancel();
	});
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.dialog-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
